<template>
  <div class="GoodsDet-box">
    <!-- 头部 -->
    <van-nav-bar
      title="商品详情"
      left-text="返回"
      left-arrow
      @click-left="GoBack"
    >
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- 商品详情 -->
    <div class="GoodsDet-content">
      <div class="GoodsDet-swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img :src="goods.img1" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="goods.img2" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="goods.img3" />
          </van-swipe-item>
          <van-swipe-item>
            <img :src="goods.img4" />
          </van-swipe-item>
          //v-for="item in goods" :key="item.proid"
        </van-swipe>
        <p>
          <span class="price">￥{{ goods.originprice }}</span>
          <span class="sales">销量：{{ goods.sales }}</span>
        </p>
        <h2>
          <van-tag type="primary" size="large" color="red" class="brand">{{
            goods.brand
          }}</van-tag>
          <van-tag type="primary">{{ goods.category }}</van-tag>
          {{ goods.proname }}
        </h2>
      </div>
      <div class="share">
        <van-cell title="分享商品" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </div>
      <div class="address">
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
      </div>
      <div class="details-list">
        <van-list
          class="details-box"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          offset="0"
          @load="onLoad"
        >
          <div
            v-for="item in goodslist"
            :key="item.proid"
            @click="goGoodsDetail(item.proid)"
          >
            <img :src="item.img1" />
            <p class="introduce">{{ item.proname }}</p>
            <p class="price">¥{{ item.originprice }}</p>
          </div>
        </van-list>
      </div>
    </div>
    <!-- 购物车底部组件 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        badge="5"
        @click="goCart"
      />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: "GoodsDetail",
  data() {
    return {
      goods: [],
      goodPrice: "",
      goodName: "",
      goodSort: "",
      goodBrand: "",
      goodsales: "",
      // 分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      // 地址
      show: false,
      fieldValue: "",
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
      // 商品列表
      goodslist: [],
      pageIndex: 1,
      finished: false,
      loading: false,
    };
  },
  created() {
    let proid = this.$route.params.goodsid;
    // console.log(proid);
    this.service.get("/pro/detail/" + proid).then((res) => {
      if (res.data.code == 200) {
        this.goods = res.data.data;
        // console.log(this.goods);
      }
    });
    this.service({
      url: "/pro/recommendlist",
      params: {
        count: this.pageIndex,
        limitNum: 10,
      },
    })
      .then((res) => {
        if (res.data.code == 200) {
          this.goodslist = [...this.goodslist, ...res.data.data];
          this.loading = false;
          this.pageIndex++;
        }
      })
      .catch((err) => {
        console.log("err", err);
      });
  },
  beforeRouteUpdate(to, from, next) {
      this.service({
        url: "pro/detail/" + to.params.goodsid,
      }).then((res) => {
        this.goods= res.data.data;
      });
      next();
    },
  methods: {  
    /* 点击返回 */ 
    GoBack() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    // 猜你喜欢商品列表
    onLoad() {},
    goGoodsDetail(id) {
      let proid = this.$route.params.goodsid;
        this.$router.push("/GoodsDetail/" + id);
    },
    /* 点击添加购物车 */
    addCart() {
      let token = localStorage.getItem("token");
      let userid = localStorage.getItem("userid");
      let proid = this.$route.params.goodsid;
      console.log(proid);
      this.service({
        method: "post",
        url: "/cart/add",
        headers: { token },
        data: `userid=${userid}&proid=${proid}&num=1`,
      }).then((res) => {
        if (res.data.code == 200) {
          this.$toast.success("加入购物车成功！");
        } else {
          this.$toast.fail("加入购物车失败！");
        }
      });
    },
    /* 点击跳转购物车 */
    goCart() {
      this.$router.push("/Cart");
    },
  },
};
</script>

<style scoped>
.GoodsDet-box {
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-color: #efefef;
}
.GoodsDet-content {
  flex: 1;
  overflow: auto;
}
.GoodsDet-swiper {
  height: 28.25rem;
}
.my-swipe {
  width: 100%;
  height: 22rem;
}
.GoodsDet-swiper img {
  width: 100%;
  height: 100%;
}
h2 {
  font-size: 1.125rem;
  background-color: white;
  border-radius: 0 0 1.25rem 1.25rem;
  height: 3.875rem;
  margin-bottom: 0.3125rem;
}
p {
  display: flex;
  justify-content: space-between;
  background-color: white;
}
.price {
  font-size: 1.75rem;
  color: #fa4b30;
}
.brand {
  margin-right: 0.3125rem;
}
.share {
  margin-top: 0.425rem;
}
.address {
  margin-top: 0.425rem;
  margin-bottom: 0.425rem;
}
/* 商品列表 */
.details-box {
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* column-count: 2;
  column-gap: 5px; */
}
.details-box div {
  width: 49%;
  text-align: center;
}
.details-box div img {
  width: 100%;
}
.introduce {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  widows: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.price {
  text-align: left;
  color: brown;
  font-size: 18px;
}
</style>